<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="demo" class="one two three" title="hello" data-index="0" asd="11111">div</div>
</body>
<script>
    // DOM -> HTML DOM -> HTML元素的增删改查

    // 节点:
    // 文档  元素  属性   文本节点  注释节点

    // 节点的查找
    // a. 找元素
    // document.getElementById()
    // document.getElementsByClassName()
    // document.getElementsByTagName()
    // document.getElementsByName()

    // parent.getElementsByClassName()
    // parent.getElementsByTagName()

    // document.querySelector()
    // document.querySelectorAll()

    // parent.querySelector()
    // parent.querySelectorAll()

    // 2.找属性节点
    // var attrNode = Element.getAttributeNode(attrName);
    // attrNode.nodeName
    // attrNode.nodeValue   //取值 赋值

    // Element.getAttribute(attrName)
    // Element.setAttribute(attrName, attrValue)
    // Element.removeAttribute(attrName)


    // 层级关系
    // 节点的层级      和     元素的层级
    // parentNode            parentElement
    // childNodes            children
    // firstChild            firstElementChild
    // lastChild             lastElementChild
    // previousSibling       previousElementSibling
    // nextSibling           nextElementSibling

    // 节点新增
    // document.createElement()
    // document.createTextNode()
    // document.createComment()


    // appendChild(node)
    // append(node|string)
    // prepend(node|string)

    // insertBefore()

    // Element.remove()
    // parent.removeChild()

    // parent.replaceChild(newNode,oldNode)

    // parent.cloneNode(false|true)

    // var div = document.createElement("div");
    // var text = document.createTextNode("hello world");
    // div.appendChild(text);

    // document.body.appendChild(div);




</script>

</html>